<template>
  <div class="cate">
    <!-- 导航栏 -->
    <div class="tou">小U商城</div>
    <header>
      <!-- <input class="iconfont" type="search" placeholder=" 按内容搜索" /> -->

      <van-search
        class="iconfont"
        shape="round"
        background=" #fb4723"
        placeholder="请输入搜索关键词"
      />
    </header>
    <body>
      <!-- 侧边栏 -->
      <div class="side">
        <van-sidebar v-model="active">
          <van-sidebar-item title="手机通讯" />
          <van-sidebar-item title="生活家电" />
          <van-sidebar-item title="家居" />
          <van-sidebar-item title="服装" />
          <van-sidebar-item title="空调" />
          <van-sidebar-item title="电视" />
        </van-sidebar>

        <!-- 9宫格 -->
        <!-- <van-grid v-if="secondCates.length > 0" :column-num="3">
          <van-grid-item
            @click="toGoods(value.id)"
            v-for="value in secondCates"
            :key="value.id"
            :text="value.catename"
          >
       
            <van-image :src="$pregUrl + value.img" />
          </van-grid-item>
        </van-grid> -->

        <van-grid :border="false" :column-num="3" gutter="3" :title="1111">
          <van-grid-item>
            <van-image
              src="https://img12.360buyimg.com/n7/jfs/t1/101760/26/50457/64362/6630b8a1Fb0a8bcec/ac40e62a59ed154b.jpg.avif"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://img13.360buyimg.com/n7/jfs/t1/230553/4/14312/28419/65e97139F8d0b7587/fe216871f88cf51b.jpg.avif"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://img10.360buyimg.com/n7/jfs/t1/242841/1/8593/82094/664345d9F5a0e6a9f/5dfb64bb9f951a03.jpg.avif"
            />
          </van-grid-item>
        </van-grid>
        <!-- <van-empty description="暂无数据" /> -->
      </div>
    </body>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      shangpin1: [
        {
          id: 1,
          img: "https://img10.360buyimg.com/n7/jfs/t1/242841/1/8593/82094/664345d9F5a0e6a9f/5dfb64bb9f951a03.jpg.avif",
        },
        {
          id: 2,
          img: "https://img13.360buyimg.com/n7/jfs/t1/230553/4/14312/28419/65e97139F8d0b7587/fe216871f88cf51b.jpg.avif",
        },
      ],
      shangpin2: [
        {
          id: 1,
          img: "https://img12.360buyimg.com/n7/jfs/t1/101760/26/50457/64362/6630b8a1Fb0a8bcec/ac40e62a59ed154b.jpg.avif",
        },
        {
          id: 2,
          img: "https://img10.360buyimg.com/n7/jfs/t1/242841/1/8593/82094/664345d9F5a0e6a9f/5dfb64bb9f951a03.jpg.avif",
        },
      ],
    };
  },
};
</script>
<style scoped>
.cate {
  background-color: #e7e7e7;
}
.van-nav-bar {
  background: #ff6040;
}
.tou {
  width: 100%;
  background-color: #fb4723;

  height: 46px;
  color: #323233;

  font-size: 24px;

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
header {
  width: 100%;
  height: 1rem;
  background-image: linear-gradient(
      180deg,
      #ff6040 0%,
      #ff7560 71%,
      #ff8a80 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);
  text-align: center;
  line-height: 1rem;
}
header input {
  width: 7.1rem;
  height: 0.64rem;
  font-size: 0.28rem;
  background-color: #fff;
  border-radius: 0.06rem;
  border: solid 0.02rem #e6e6e6;
  padding-left: 0.5rem;
}

input::placeholder {
  font-size: 0.28rem;
}
.side {
  display: flex;
}
.van-grid {
  flex: 1;
  height: 2rem;
}
.van-empty {
  margin-left: 1.55rem;
}
.van-sidebar {
  width: 100px;
  text-align: center;
}
</style>